<template>
  <div class="bgf buyBox" >
    <div>
      <el-table :data="tableData" border style="width: 100%" >
        <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
        
        <el-table-column prop="orderId" label="单号"> </el-table-column>      
        <el-table-column prop="createTime" label="支付时间"> 
          <template slot-scope="scope">{{timeFun(scope.row.createTime)}}</template>
        </el-table-column>      
        <el-table-column prop="mobile" label="用户手机"> </el-table-column>      
        <el-table-column prop="product.type" label="类别"> </el-table-column>      
        <el-table-column prop="amount" label="消费金额"> </el-table-column>         
        <el-table-column prop="channel" label="方式">
              <template slot-scope="scope">
                <span v-if="scope.row.channel == 'alipay'">支付宝</span>
                <span v-if="scope.row.channel == 'wxpay'">微信</span>
                <span v-if="scope.row.channel == 'huabei'">花呗</span>
              </template>
          </el-table-column>      
          <el-table-column prop="product.title" label="商品名"> </el-table-column>      
          <el-table-column prop="status" label="订单状态">
            <template slot-scope="scope">
              <div>
                
                <span v-if="scope.row.useStatus  == 0" > 未使用</span>
                <span v-else-if="scope.row.useStatus  == 1 " class="green"> 使用</span>
                <span v-else-if="scope.row.useStatus  == 2" class="red">过期</span>
                <span v-else-if="scope.row.useStatus  == 3" style="color:#409EFF">已评价</span>
              </div>  
            </template>  
          </el-table-column>      
        </el-table>
     
      <el-dialog title="结算" :visible.sync="dialogVisible" center width="40%" :before-close="handleClose">
        <div class="" style="text-align:center">
          <div>结算金额：<span>123.4</span>元</div>
          <div>商家：<span>麦芽糖</span></div>
          <div><el-input v-model.number="input" placeholder="请输入金额"></el-input></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitFun('ruleForm2')">确 定</el-button>
        </span>
      </el-dialog>


      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'

  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入关键字'));
        } else {
          callback();
        }
      };
      return {
        currentPage4: 1,//分野  
        total:0,      
        tableData: [],
        input5:'',
        keyword:'',
        beginTime:'',
        endTime:'',
        input:222,
        page:1,
        pageSize:10,
        sheachValue:'',
        dialogVisible:false,
         pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value5: ''
       
      }
    },
    props:['navStatus'],
    created() {
      this.getlist()
    },
    methods: {
      getlist(val='') {
        const parma = {
          "pageIndex":this.page,
          "pageSize":this.pageSize,
        };
        if(this.navStatus == -1){
          parma.status = 0;
        }
        if(val){
          parma.keyword = val;
        }
        Http.getBuyList(parma)
        .then(res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total
          console.log(res)
        })
      },  
      goShop() {
        this.dialogVisible = true
      },
      timeFun(val) {
        return getTime(val)
      }, 
      handleClose() {
        this.dialogVisible = false;
      },
       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        console.log(`当前页: ${val}`);
      },
     
      seachFun(){
        console.log(2332)
      }
    }
  }
</script>
<style>
.buyBox{
  background: #fff;
  padding:10px;
  min-height: 500px
}
</style>

